<template>
    <div class="container_box">
        <el-scrollbar ref="scrollbarRef" class="main_box">
            <div class="create-content">
                <div class="content">
                    <div class="content-left">
                        <el-form ref="formRef" class="form_box" :model="form" :rules="rules" label-width="130px">
                            <!-- 标题 -->
                            <el-form-item label="标题" prop="title">
                                <el-input
                                    v-model="form.title"
                                    class="w600"
                                    maxlength="20"
                                    show-word-limit
                                    :placeholder="`请输入标题`"
                                    @input="inputChange"></el-input>
                            </el-form-item>
                            <!-- 分组 -->
                            <el-form-item label="分组" prop="group_id">
                                <el-cascader
                                    ref="cascaderRef"
                                    v-model="form.group_id"
                                    class="group_base"
                                    style="width: 600px"
                                    :options="groupData"
                                    filterable
                                    :props="defaultProps"
                                    placeholder="请选择分组"
                                    @change="orgChange" />
                            </el-form-item>
                            <!-- 素材内容 -->
                            <el-form-item label="素材内容" prop="materials" class="base_content">
                                <MaterialContent
                                    ref="materialContentRef"
                                    :max-num="9"
                                    ecommerce-share-disabled
                                    :input-content-tabs="inputContentTabs"
                                    :show-material-tabs="showMaterialTabs"
                                    :input-content-data="inputContentData"
                                    :material-content-data="materialContentData"
                                    @change="changeMaterial" />
                            </el-form-item>
                            <el-form-item label="同步至基础素材库">
                                <el-switch v-model="form.base" :disabled="form.code.length == 0" @change="syncBase" />
                            </el-form-item>
                            <!-- 分组 -->
                            <el-form-item v-if="form.base" label="所选分组:" prop="title">
                                <el-cascader
                                    v-model="form.group2"
                                    :options="baseGroupData"
                                    :props="defaultProps"
                                    style="width: 100%"
                                    placeholder="请选择分组" />
                                <div class="title_desc">将朋友圈中的图片/视频/链接同步至基础素材库</div>
                            </el-form-item>
                        </el-form>
                    </div>
                    <div class="content-right">
                        <div class="title">欢迎语预览</div>
                        <PhonePreview ref="phonePreviewRef" />
                    </div>
                </div>
            </div>
            <Videowicket />
        </el-scrollbar>
        <div class="footer_box">
            <el-button @click="$e => cancel()">取消</el-button>
            <el-button type="primary" @click="save">保存</el-button>
        </div>
    </div>
</template>

<script lang="ts" setup>
import router from '@/router';
import Videowicket from '@/view/content/basematerial/video/components/videoWicket.vue';

import MaterialContent from '@/components/zw/friendCircle/index.vue';
import PhonePreview from '@/components/zw/phonePreview/friendCircle/materialPreview/index.vue';

import { ElMessage } from 'element-plus';
import {
    getGroupList,
    createFriend,
    friendDetail,
    editFriend,
    uploadImage,
    conserve,
    quickLink
} from '@/api/concreation';
import {
    getSetionId,
    IsNotEmpty,
    useInsertWelcomeContent,
    getImageUrlWH,
    initMaterialData,
    getContentHeight
} from '@/utils/utils';
import { ref, reactive, onMounted, watch, computed } from 'vue';
import { useRoute } from 'vue-router';
import { store } from '@/store';

const route = useRoute();
const cascaderRef: any = ref(null); // 选择分组ref
const mediaContentId = ref(0);
//是否编辑
const isEdit = ref(false);
const groupId = ref(0);
// 回显朋友圈素材
const defaultProps = {
    checkStrictly: true,
    emitPath: false,
    label: 'name',
    value: 'id'
};

const form = reactive({
    title: '',
    group_id: 0,
    content: '',
    materials: null, // 欢迎语素材
    content_type: -1, //创建朋友圈的素材类型
    content_type_local: 1, //当前素材从哪里来的 0,本地  1 素材库  2本地和素材库都有
    media_content_id: [], //素材选择的素材的id
    base: false,
    group2: '0',
    dataType: 'image', //数据类型  图片  视频 文本 链接
    dataTypeLimit: { image: 9, video: 1, link: 1, text: 1 },
    data: { list: [] }, //素材数据
    // link_title:"", //本地上传链接的标题
    // link_url:"", //本地上传链接的url
    // link_decs:"", //本地上传链接的描述
    // link_share_image:"", //分享图片 封面W
    code: [], //本地上传的code
    media_moment_attachment_ids: []
});
const isShow = ref(true);

const checkMaterials = (rule: any, value: any, callback: any) => {
    if (!value) {
        return callback(new Error('请输入朋友圈内容'));
    }
    const {
        welcome_info: { welcome_text, welcome_material, welcome_local_link, welcome_local_upload }
    } = value;
    if (!welcome_text && !welcome_material.length && !welcome_local_link.length && !welcome_local_upload.length) {
        return callback(new Error('请输入朋友圈内容'));
    }
    callback();
};

const rules = reactive({
    title: { required: true, message: '标题不能为空', trigger: ['change', 'blur'] },
    content: { required: true, message: '素材内容不能为空', trigger: ['change', 'blur'] },
    group_id: { required: true, message: '请选择分组', trigger: ['change', 'blur'] },
    materials: [{ validator: checkMaterials, trigger: 'blur' }]
});

const materialContentRef = ref<HTMLElement | null>();
const phonePreviewRef = ref<HTMLElement | null>();
const inputContentTabs = ref<Array<number>>([1, 2]); // 配置欢迎语输入框选项
const showMaterialTabs = ref<Array<string>>(['1', '2', '3', '6', '7', '9', '11']); // 配置选择素材组件类型
const inputContentData = ref<string>(''); //  用户存放回显数据  欢迎语输入框
const materialContentData = ref<Array<any>>([]); //  用户存放回显数据  欢迎语素材
const materialResult = ref<any>(null);

// 获取分组数据
const groupData = ref([]);
const baseGroupData = ref([]);
const formRef = ref(null);

const getGroupListFun = () => {
    // 1-内容分组-文本 2-内容分组-图片 3-内容分组-音频 4-内容分组-视频 5-内容分组-文件 6-内容分组-链接文章 8-朋友圈素材分组 9-我的海报 10-企业海报 11-19智能营销 20-会话敏感词库 22-门店分组 23-门店获取 24-我的话术 25-企业话术
    getGroupList({ type: 8 }).then((r: any) => {
        groupData.value = r.data;
    });
};
getGroupListFun();
// 剩余数量
const imgLen = computed(() => {
    return form.data.list.length;
});

const cancel = (flag?: boolean) => {
    isEdit.value = false;
    let groupId: number | string;
    if (flag) {
        groupId = form.group_id;
        router.push({ path: '/content/friendcirclemat', query: { groupId } });
    } else {
        router.push({ path: '/content/friendcirclemat' });
    }
};

// 判断是否是本地还是素材库或者两者都要
const localType = (key: string, arr: any[]) => {
    // 0 本地 1选择素材库 2本地和素材库都有
    let num = 0;
    if (arr.length > 0) {
        const perhaps = arr.some((item: any) => item.hasOwnProperty(key)); // 获取有
        const only = arr.every((item: any) => item.hasOwnProperty(key)); // 只有
        if (only) {
            num = 0; //本地
        } else {
            num = 1; //素材库
        }
        if (perhaps && !only) num = 2; //本地和素材库都有
    }
    return num;
};

const changeMaterial = (val: any) => {
    materialResult.value = val;
    form.materials = val;
    form.content_type = val.type;
    initCode(val);
};

const initCode = (val: any) => {
    form.code = [];
    const {
        welcome_info: { welcome_local_link, welcome_local_upload }
    } = val;
    if (welcome_local_link.length) {
        form.code = welcome_local_link.map((item: any) => {
            const { link_url, link_desc: link_decs, link_title } = item;
            form['link_url'] = link_url;
            form['link_decs'] = link_decs;
            form['link_title'] = link_title;
            return item.code;
        });
    } else if (welcome_local_upload.length) {
        form.code = welcome_local_upload.map((item: any) => item.code);
    }
};

//保存
const save = () => {
    if (form.media_content_id.length > 0) {
        isShow.value = false;
    }
    formRef.value.validate(async (valid: any) => {
        if (valid) {
            const params = {
                ...materialResult.value,
                title: form.title,
                group_id: form.group_id,
                content: form.content,
                content_type: form.content_type,
                content_type_local: form.content_type_local
            };
            if (form.content_type == 6) {
                params.activity = form.media_content_id[0];
            }
            if (form.content_type == 9) {
                params.collect_form = form.media_content_id[0];
            }
            if (form.content_type == 8 || form.content_type == 7) {
                params.retail_material = form.media_content_id[0];
            }

            // 创建
            if (!isEdit.value) {
                params.content_type_local = localType('code', form.data.list);
            } else {
                params.media_moment_id = form.media_moment_id;
                // 列表的数据
                const formList = form.data?.list?.length ? form.data.list.filter((item: any) => item.fromList) : [];
                //新增数据
                const List = form.data?.list?.length ? form.data.list.filter((item: any) => !item.fromList) : [];
                if (formList.length == 0) {
                    params.media_moment_attachment_ids = [];
                    params.content_type_local = List.length > 0 && localType('code', List);
                } else {
                    params.media_moment_attachment_ids = getSetionId('media_moment_attachment_id', formList);
                    // 列表类型判断
                    const contentType = form.content_type_local;
                    // 链接 本地上传的显示id
                    params.content_type_local = contentType;
                    //	将带有朋友圈素材附件ID的集合传过来 回显的数据剩余的
                    if (contentType == 0 && form.media_content_id.length > 0) {
                        params.content_type_local = 2;
                    }
                    if (contentType == 1 && form.code.length > 0) {
                        params.content_type_local = 2;
                    }
                    if (form.content_type == 3 && contentType == 0) {
                        params.media_moment_attachment_ids = getSetionId('id', formList);
                    }
                }
            }
            params.media_content_id = form.media_content_id;
            params.code = form.code;
            // 文本
            // if (form.data.list.length == 0) {
            //   delete params.content_type_local
            //   delete params.media_content_id
            //   delete params.content_type
            //   delete params.media_moment_attachment_ids
            //   delete params.code
            // }
            // 链接 本地
            // if (params.content_type_local == 0 && form.content_type == 3 && form.data.list.length > 0) {
            //   params.link_decs = form.data.list[0].content
            //   params.link_share_image = form.data.list[0].cover_image_url
            //   params.link_title = form.data.list[0].title
            //   params.link_url = form.data.list[0].link_url
            // }

            try {
                //编辑朋友圈               // 创建朋友圈接口
                isEdit.value ? await editFriend(params) : await createFriend(params);
                ElMessage.success(`${isEdit.value ? '编辑' : '创建'}朋友圈素材成功`);

                // 同步素材库接口
                if (form.code.length > 0 && form.base) {
                    syncLib(form.content_type, form);
                }

                cancel(true);
            } catch (e) {}
        }
    });
};
// 同步库获取分组信息
const syncBase = async (val: any) => {
    if (val) {
        // let res: any[] = []
        const type_: number = form.content_type;
        let type = 0;
        // const res = await getGroupList({ type})
        // // 图片
        switch (type_) {
            case 1:
                type = 2;
                break;
            case 2:
                type = 4;
                break;
            case 3:
                type = 6;
                break;
        }
        // if (type == 1) {
        //   res = await getGroupList({ type: 2 })
        // } else if (type == 2) {
        //   // 视频
        //   res = await getGroupList({ type: 4 })
        // } else if (type == 3) {
        //   res = await getGroupList({ type: 6 })
        // }
        const res = await getGroupList({ type });
        baseGroupData.value = res.data;
    }
};
// 同步接口
const syncLib = async (type: number, form: any) => {
    const params = {
        title: form.title,
        group_id: form.group2,
        code: type == 1 ? form.code : form.code[0]
    };
    switch (type) {
        case 1: //图片
            params['file_type'] = 0;
            return await uploadImage(params);
        case 2: //视频
            params['file_type'] = 0;
            return await conserve(params);
        case 3: //链接
            params['title'] = form.link_title;
            params['link'] = form.link_url;
            params['desc'] = form.link_decs;
            params['cover_code'] = form.code?.[0];
            return await quickLink(params);
    }
};
// 输入框输入字符 不包含特殊字符
const inputChange = (value: string) => {
    const regEn = /[`~!@#$%^&*()_+<>?:"{},.\/;'[\]]/im,
        regCn = /[·！#￥（——）：；“”‘、，|《。》？、【】[\]]/im;
    if (regEn.test(value) || regCn.test(value)) {
        form.title = form.title.replace(/[`~!@#$%^&*()_+<>?:"{},.\/;'[\]]/im, '');
        form.title = form.title.replace(/[·！#￥（——）：；“”‘、，|《。》？、【】[\]]/im, '');
        return false;
    }
};

//
const getType = (val: number) => {
    switch (val) {
        case 1:
            return 'image';
        case 2:
            return 'video';
        case 3:
            return 'link';
        default:
            return 'text';
    }
};
//获取朋友圈详情
const getDetail = () => {
    friendDetail({
        media_moment_id: mediaContentId.value
    }).then((res: any) => {
        inputContentData.value = res.welcome_info.welcome_text;
        materialContentData.value = initMaterialData(res.welcome_info.welcome_material);
        form.group_id = res.group_id;
        groupId.value = form.group_id;
        form.content = res.content_text;
        form.title = res.title;
        form.content_type = res.type;
        form.content_type_local = res.content_type_local;
        form.media_moment_id = mediaContentId.value; //编辑朋友圈素材
        form.dataType = getType(res.type);
        if (res.type == 2) {
            //视频
            res.video.fromList = true;
            res.video.thumbnail_url =
                res.video.absolute_url + '?x-oss-process=video/snapshot,t_0,f_jpg,w_140,h_90,m_fast';
            form.data.list = [res.video];
        }
        if (res.type == 1) {
            // 图片
            res?.image?.length &&
                res.image.map((item: any) => {
                    item.fromList = true;
                    item.thumbnail_url = item.absolute_url;
                });
            form.data.list = res.image;
        }
        if ([3, 6, 7, 8, 9].includes(res.type)) {
            const dataType = {
                3: 'link',
                6: 'luckcy',
                7: 'ecommerce',
                8: 'ecommerce',
                9: 'collect'
            };
            form.dataType = dataType[res.type];
            // 链接
            form.data.list = [
                {
                    title: res.link?.link_title,
                    cover_image_url: res.link?.link_share_image,
                    content:
                        res.type === 8
                            ? res.link_title
                            : res.link?.link_desc || res.link.link_decs || res.link?.link_url,
                    url: res.link?.link_url,
                    link_url: res.link?.link_url,
                    fromList: true,
                    media_moment_attachment_id: res.link?.media_moment_attachment_id || res.link?.id
                }
            ];
        }
    });
};
// 选择完地区后立即关闭
const orgChange = () => {
    cascaderRef.value.togglePopperVisible();
};
const contentHeight = computed(() => getContentHeight());

onMounted(() => {
    mediaContentId.value = route.query?.id;
    form.group_id = +route.query?.groupId;
    groupId.value = form.group_id;
    if (mediaContentId.value) {
        isEdit.value = true;
        getDetail();
    }
});

watch(
    () => form.data.list,
    val => {
        const code: any[] = [],
            mediaIds: any[] = [];
        if (val) {
            //不是连接
            const List = val.filter((item: any) => !item.fromList);
            if (List.length > 0) {
                List.forEach((item: any) => {
                    if (!item.hasOwnProperty('code')) {
                        mediaIds.push(item.id);
                    } else {
                        code.push(item.code);
                    }
                });
            }
        }
        form.media_content_id = mediaIds;
        form.code = code;
    }
);
</script>
<style lang="scss" scoped>
.base_friend {
    width: 100%;
    display: flex;
    align-items: flex-start;
    padding-top: 16px;
    background: white;

    .form_box {
        width: 50%;

        .base_content {
            .base_content_box {
                background-color: #f8f8f8;
                border-radius: 4px;
                border: 1px solid #eaeaea;

                // padding-top: 40px;
            }

            position: relative;

            .text_btn {
                position: absolute;
                right: 5px;
                top: 0;
            }
        }

        .title_desc {
            height: 20px;
            background: #f9f9f9;
            line-height: 20px;
            font-size: 12px;
            font-family: STHeitiSC-Light, STHeitiSC;
            font-weight: 300;
            color: #696969;
            margin-top: 8px;
            padding-left: 12px;
        }

        .btn_box {
            text-align: right;
            padding: 80px 0;
        }
    }

    .phone_view {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        .phone-title {
            margin-bottom: 15px;
        }
    }
}

.circlemat_box {
    display: flex;
    padding: 11px 0;
    margin: 0 12px;
    border-top: 1px solid #eaeaea;
    justify-content: flex-start;
    flex-wrap: wrap;

    .upload_btn_box {
        cursor: pointer;
        width: 140px;
        height: 90px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        border: 1px solid #eaeaea;
    }

    .tips {
        color: #cfcbc7;
        font-size: 12px;
        line-height: 18px;
        font-weight: 500;
        margin-top: 20px;
    }

    .upload_desc {
        font-size: 14px;
        font-family: STHeitiSC-Light, STHeitiSC;
        font-weight: 300;
        color: #ff6b00;
    }

    .item_box {
        margin-bottom: 10px;

        & > div {
            margin-right: 10px;
        }

        .image_item,
        .video_box {
            width: 140px;
            height: 90px;
            position: relative;

            .image {
                width: 100%;
                height: 100%;
            }

            .del {
                position: absolute;
                top: 6px;
                right: 6px;
                width: 10px;
                height: 10px;
                cursor: pointer;
                z-index: 90;
                color: #ddd;
            }

            .cover {
                position: absolute;
                width: 100%;
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                top: 0;
                left: 0;
                background: rgb(0 0 0 / 40%);

                img {
                    width: 30px;
                    height: 30px;
                    cursor: pointer;
                }
            }
        }

        .link_box {
            width: 286px;
            border-radius: 1px;
            border: 1px solid #eaeaea;
            position: relative;
            padding: 5px 35px 5px 10px;
            display: flex;
            justify-content: flex-start;
            box-sizing: border-box;

            .content {
                width: 172px;

                .title {
                    width: 100%;
                    font-size: 14px;
                    line-height: 20px;
                    font-family: STHeitiSC-Medium, STHeitiSC;
                    font-weight: 800;
                    color: #33302d;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    word-break: break-all;
                }

                .link_desc {
                    margin-top: 5px;
                    width: 100%;
                    white-space: normal;
                    font-size: 12px;
                    font-family: STHeitiSC-Light, STHeitiSC;
                    font-weight: 300;
                    color: #969696;
                    line-height: 14px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    line-clamp: 2;
                    -webkit-box-orient: vertical;
                }
            }

            .image {
                width: 60px;
                height: 60px;
                border-radius: 2px;
                margin-left: 9px;
            }

            .del {
                position: absolute;
                width: 10px;
                height: 10px;
                top: 30px;
                right: 13px;
                cursor: pointer;
            }
        }
    }
}

.create-content {
    padding: 24px;

    .content {
        // padding: 20px;
        box-sizing: border-box;
        display: flex;

        .content-left {
            flex: 1;
            padding-right: 48px;
            border-right: 1px solid #eee;

            .list_item {
                padding-left: 1.125rem;
                padding-bottom: 24px;
                border-bottom: 0.0625rem solid #eaeaea;

                &:last-of-type {
                    border-bottom: none;
                }

                .item_title {
                    font-size: 0.875rem;
                    line-height: 1.125rem;
                    font-family: STHeitiSC-Medium, STHeitiSC;
                    font-weight: 500;
                    color: #33302d;
                    margin-bottom: 12px;

                    .title_icon {
                        display: block;
                        height: 1.125rem;
                        width: 0.1875rem;
                        background: #ff6b00;
                        float: left;
                        margin-left: -0.9375rem;
                    }
                }

                .item_con_input {
                    width: 29.375rem;
                }

                .item_con {
                    .radio_group {
                        margin-right: 0.9375rem;
                    }

                    .cus_type_0 {
                        margin-top: 1.25rem;
                        font-size: 0.875rem;
                        font-family: STHeitiSC-Light, STHeitiSC;
                        font-weight: 300;
                        color: #33302d;

                        span {
                            color: #ff6b00;
                        }
                    }

                    .form_cus_type {
                        margin-top: 0.3125rem;

                        .el-form-item__content {
                            .form_item_input {
                                .el-input__inner {
                                    width: 15.8125rem !important;
                                }
                            }
                        }
                    }

                    .input_textarea {
                        width: 100%;

                        :deep .el-textarea__inner {
                            height: 10.625rem;
                            background: #f8f8f8;
                            border: 0;
                            border-bottom: 0.0625rem solid #eaeaea;
                            padding: 0.3125rem 0;
                        }
                    }
                }

                .item_message_box {
                    background: #f8f8f8;
                    border: 0.0625rem solid #eaeaea;
                    border-radius: 0.25rem;
                    width: 36.25rem;
                    height: 23.75rem;
                    position: relative;

                    .simple_fn {
                        margin-top: 0.3125rem;
                        display: flex;
                        align-items: center;
                        font-family: STHeitiSC-Light, STHeitiSC;
                        font-weight: 300;
                        color: #33302d;
                        padding-bottom: 0.375rem;
                        border-bottom: 0.0625rem solid #eaeaea;

                        .cus_name {
                            margin-right: 1.125rem;
                            color: #ff6b00;
                            cursor: pointer;
                        }

                        .emoj {
                            margin-left: 0.3125rem;
                            cursor: pointer;
                        }

                        .sele_text {
                            cursor: pointer;
                        }
                    }

                    .upload_list_box {
                        overflow: hidden;
                        height: 8.4375rem;
                    }

                    .upload_list {
                        .upload_item {
                            margin-top: 0.3125rem;
                            width: 27.5rem;
                            height: 2rem;
                            box-sizing: border-box;
                            background: #eaeaea;
                            display: flex;
                            padding: 0 0.625rem 0 0.875rem;
                            align-items: center;

                            .file_icon {
                                width: 1.25rem;
                                height: 1.25rem;
                                margin-right: 0.4375rem;
                            }

                            .file_name {
                                width: 23.4375rem;
                                white-space: nowrap;
                                text-overflow: ellipsis;
                                overflow: hidden;
                            }

                            .del_icon {
                                width: 0.625rem;
                                height: 0.625rem;
                                cursor: pointer;
                            }
                        }
                    }

                    .upload_btn {
                        margin-top: 8px;
                        width: 420px;
                        height: 32px;
                        background: #f8f8f8;
                        border: 0.0625rem solid #d9d9d9;
                        padding: 0 0.75rem;
                        box-sizing: border-box;
                        display: flex;
                        align-items: center;
                        font-size: 0.875rem;
                        font-family: STHeitiSC-Light, STHeitiSC;
                        font-weight: 300;
                        color: #969696;

                        .upload_text {
                            margin-left: 0.5rem;
                        }
                    }

                    .upload_pop {
                        position: absolute;
                        bottom: 3.125rem;
                        left: -1.25rem;
                        width: 22.5rem;
                        height: 5.25rem;
                        background: #fff;
                        border-radius: 0.75rem;
                        box-shadow: 0 0.125rem 0.25rem 0 rgb(216 216 216 / 50%);
                        display: flex;
                        align-items: center;
                        justify-content: space-around;

                        .item_pop {
                            width: 3.75rem;
                            height: 3.875rem;
                            background: #fff;
                            border-radius: 0.375rem;
                            border: 0.0625rem solid #f9f9f9;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            flex-direction: column;
                            cursor: pointer;

                            .item_pop_icon {
                                width: 2.5rem;
                            }

                            .item_pop_name {
                                font-size: 0.875rem;
                                margin-top: 0.125rem;
                                font-family: PingFangSC-Regular, 'PingFang SC';
                                font-weight: 400;
                                color: #1a1918;
                            }
                        }

                        &::after {
                            content: '';
                            position: absolute;
                            bottom: -0.625rem;
                            left: 50%;
                            transform: translate(-50%);
                            width: 0;
                            height: 0;
                            border-left: 0.625rem solid transparent;
                            border-right: 0.625rem solid transparent;
                            border-top: 0.625rem solid #fff;
                        }
                    }

                    .emoj_box {
                        width: 16.875rem;
                        position: absolute;
                        top: -2.5rem;
                    }
                }
            }

            .mt20 {
                margin-top: 1.25rem;
            }
        }

        .content-right {
            padding: 0 24px 0 48px;

            .title {
                text-align: center;
                line-height: 3.5;
                font-size: 14px;
                color: #333;
            }
        }
    }
}

.bottom-btns {
    .btns {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

.w600 {
    width: 600px;
}
</style>
<style lang="scss">
.textare_input {
    margin-bottom: 10px;

    .el-textarea__inner {
        background-color: #f5f5f5;
        border: 0;
        box-shadow: none;
    }
}
</style>
